<%@page contentType="text/html;charset=utf-8"%>
<%@ taglib prefix="cw" uri="/widget-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>表单交互示例</title>
		<cw:base />
		<script type="text/javascript">
			var fields=['code','name'];
		</script>
	</head>
	<body>
		<li>
			<b>以下示例主要展現了表单交互的完整示例，各种基本输入框的信息加载以及表单的异步和同步提交</b>
		</li>
		<li>
			<b> 表单ajax方式加载及提交（页面不刷新） </b>
			<cw:form id="form" url="../../../../sample/form/ajaxSubmit.action">
				<table>
					<colgroup>
						<col width='15%'>
						<col width='15%'>
						<col width='15%'>
						<col width='15%'>
						<col width='15%'>
						<col width='15%'>
					</colgroup>
					<tr>
						<td align="right">
							身份证号码：
						</td>
						<td>
							<cw:text property="idcard" validateType="idcard" />
						</td>
						<td align="right">
							<font color=red>*</font>姓名：
						</td>
						<td>
							<cw:text property="name" />
						</td>
						<td align="right">
							性别：
						</td>
						<td>
							<cw:checkboxGroup property="sex" type="radio">
								<cw:checkbox type="radio" text="男" inputValue="1" />
								<cw:checkbox type="radio" text="女" inputValue="2" />
							</cw:checkboxGroup>
						</td>
					</tr>
					<tr>
						<td align="right">
							出生日期:
						</td>
						<td>
							<cw:dateField property="dateTime" />
						</td>
						<td align="right">
							区县:
						</td>
						<td>
							<cw:combobox property="district" fields="fields" url="../../../../sample/form/loadCodeInfo.action"
								urlParams="{parentValue: 'shanghai'}" displayField="name" valueField="code" />
						</td>
						<td align="right">
							户籍性质:
						</td>
						<td>
							<cw:combobox property="census" data="[[1,'城镇户口'],[2,'农村户口']]" editable="true" emptyText="请选择..." />
						</td>
					</tr>
					<tr>
						<td align="right">
							邮政编码:
						</td>
						<td>
							<cw:number property="zip" allowDecimals="false" allowNegative="false" validateType="zipcode" />
						</td>
						<td align="right">
							联系电话:
						</td>
						<td>
							<cw:number property="phone" maxLength="8" minLength="8" allowDecimals="false" allowNegative="false" />
						</td>
						<td align="right">
							电子邮箱:
						</td>
						<td>
							<cw:text property="email" validateType="email" />
						</td>
					</tr>
					<tr>
						<td align="right">
							户籍所在地:
						</td>
						<td>
							<cw:textArea property="censusAddress" maxLength="300" cnCharacter="true" />
						</td>
					</tr>
				</table>
				<br>
				<cw:text property="id" type="hidden"></cw:text>
			</cw:form>
			<table align="center">
				<tr>
					<td>
						<cw:formButton actionType="submit" formId="form" text="提交"></cw:formButton>
					</td>
					<td>
						<cw:formButton actionType="reset" formId="form"></cw:formButton>
					</td>
				</tr>
			</table>
		</li>
		<li>
			<b> 表单也可以同步提交(和普通的html form功能一致)，设置表单属性ajax="false"(默认为true)，跳转到一个新的页面，多用于系统登录 </b>
			<cw:form id="form2" url="../../../../sample/form/submit.action" ajax="false">
				<table>
					<tr>
						<td>
							姓名：
						</td>
						<td>
							<cw:text property="name" required="true" />
						</td>
					</tr>
				</table>
			</cw:form>
			<table>
				<tr>
					<td>
						<cw:formButton actionType="submit" formId="form2" text="提交"></cw:formButton>
					</td>
				</tr>
			</table>
		</li>
		<script type="text/javascript">
			cf_r(function(){
				Wonders.utils.formLoad('form','../../../../sample/form/loadForm.action', {'id' :'1'});
			})
		</script>
	</body>
	<cw:theme></cw:theme>
</html>
